<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <tree-tools
          :tree-node="company"
          :is-root="true"
          @addDept="addDept"
        >
          <!-- 方式一 -->
          <!-- <el-dropdown-item>添加子部门</el-dropdown-item> -->
          <!-- 方式二  :is-root="true"-->
        </tree-tools>
        <!-- 树形图 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <tree-tools slot-scope="{ data }" :tree-node="data" @delDepts="getDepartments" @addDept="addDept" @editDept="editDept">
            <!-- 方式一 -->
            <el-dropdown-item @click.native="addDept(data)">添加子部门</el-dropdown-item>
            <el-dropdown-item @click.native="editDept(data)">编辑部门</el-dropdown-item>
            <el-dropdown-item @click.native="handleDel(data.id)">删除部门</el-dropdown-item>
          </tree-tools>
        </el-tree>
      </el-card>
    </div>
    <!-- 新增部门弹层 -->
    <add-dept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :tree-node="node"
      @addDeptSuccess="addDeptSuccess"
    />
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { getDepartments, delDepartments, getDepartmentsDetail } from '@/api/departments'
import { transListToTreeData } from '@/utils/index'
export default {
  name: 'Departments',
  components: {
    TreeTools, AddDept
  },
  props: {},
  data() {
    return {
      company: { name: '传智', manager: '负责人' },
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      departs: [
        // {
        //   name: '总裁办',
        //   manager: '曹操',
        //   children: [{ name: '董事会', manager: '曹丕' }]
        // },
        // { name: '行政部', manager: '刘备' },
        // { name: '人事部', manager: '孙权' }
      ],
      showDialog: false,
      node: {}
    }
  },
  created() {
    this.getDepartments()
  },
  mounted() {},
  methods: {
    // 获取公司组织架构数据
    async getDepartments() {
      const result = await getDepartments()
      // console.log(result)
      this.company.name = result.companyName
      this.company.id = ''
      this.departs = transListToTreeData(result.depts)
    },
    // 删除组织架构
    handleDel(id) {
      // 删除
      this.$confirm('确认删除该部门吗', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'success'
      })
        .then(async action => {
          await delDepartments(id)
          this.$message({
            message: '删除成功',
            type: 'success',
            showClose: true,
            duration: 3000
          })
          this.getDepartments()
        })
        .catch(() => {})
    },
    // 添加部门
    addDept(node) {
      this.node = node
      this.showDialog = true
    },
    addDeptSuccess(value) {
      this.getDepartments()
      this.showDialog = value
    },
    async editDept(node) {
      // 方式1.把formData拿给父组件,通过prop传给子组件(不推荐)
      // 方式2.通过refs得到子组件,直接修改子组件的数据
      // this.$refs.addDept.formData = await getDepartmentDetail(node.id)
      // 方式3.通过refs得到子组件,调用子组件的方法,间接修改子组件的数据
      this.node = node
      this.showDialog = true
      this.$refs.addDept.formData = await getDepartmentsDetail(node.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
